<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps(["data", "color"]);

const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  let series = [];
  // 里到外颜色
  let colors = props.color;

  props.data.forEach(function (item, index) {
    // 圈大小
    let radius = [100 - index * 25 + "%", 90 - index * 25 + "%"];
    let center = ["30%", "50%"];
    // 上面彩色圈
    let upCircle = {
      // name: item.name,
      type: "pie",
      radius,
      center: center,
      z: 2,
      startAngle: 90,
      clockwise: false,
      emphasis: {
        disabled: true,
      },
      data: [
        // 占比的一边
        {
          hoverOffset: 1,
          value: item.value,
          name: item.name,
          itemStyle: {
            color: colors[index],
          },
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              smooth: false,
              lineStyle: {
                width: 0,
              },
            },
          },
          hoverAnimation: false,
        },
        // 另外一边
        {
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          value: 400 - item.value,
          hoverAnimation: false,
          itemStyle: {
            color: "rgba(0,0,0,0)",
          },
        },
      ],
    };
    // 下面一圈
    let downCircle = {
      type: "pie",
      radius,
      center: center,
      z: -1,
      data: [
        {
          hoverOffset: 0,
          value: item.value,
          name: "",
          itemStyle: {
            color: "rgba(229, 229, 229,.3)",
          },
          label: {
            show: false,
          },
          tooltip: false,
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          hoverAnimation: false,
        },
      ],
    };
    series.push(upCircle, downCircle);
  });

  const option = {
    // title: {
    //   text: props.data[1].value + "%",
    //   x: "center",
    //   y: "center",
    //   textStyle: {
    //     fontSize: "12px",
    //     color: "#73F49A",
    //   },
    // },
    legend: {
      bottom: 8,
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 8,
      textStyle: {
        fontSize: 12,
        fontWeight: "bold",
        color: "#FFFFFF",
        rich: {
          name: {
            color: "rgba(201,233,248,0.8)",
            fontSize: 10,
          },
        },
      },
      formatter: (e) => {
        let val = 0;
        props.data.forEach((el) => {
          if (e == el.name) val = el.value;
        });
        return `{name|${e}} ${val}`;
      },
    },
    series,
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
